<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>科鹏机电</title>
<head th:include="include :: header"></head>
<link href="/css/layui.css" rel="stylesheet">
<link rel="stylesheet" href="/css/common.css">
<style>
    .layui-card-body{
        background: #fff;
    }
</style>
<body>
<input id="projectid" name="projectid" th:value="${id}"  type="hidden">
<div class="header">
    <div class="layui-container">
        <div class="layui-logo">
            <cite> 项目<span class="layui-hide-xs">文件服务器</span></cite>
        </div>
    </div>
</div>


<div class="layui-container" style="padding-top: 15px;">
    <div class="layui-card">
<!--        <div class="layui-card-header">当前位置：<span id="tvFP">/</span></div>-->
        <div class="layui-card-body">
            <div class="file-list">
            </div>
        </div>
    </div>
</div>


<!-- 下拉菜单 -->
<div class="dropdown-menu dropdown-anchor-top-left" id="dropdownFile">
    <div class="dropdown-anchor"></div>
    <ul>
        <li><a id="open"><i class="layui-icon layui-icon-file"></i>&emsp;查看&emsp;</a></li>
    </ul>
</div>


<!-- 渲染模板 -->
<script id="fileTpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <div class="file-list-item" data-url="{{item.url}}" data-name="{{item.name}}">
        <div class="file-list-img">

            <img src="/images/fti/{{item.type}}.png"/>
        </div>
        <div class="file-list-name">{{item.name}}</div>
    </div>
    {{#  }); }}
    {{# if(d.length<=0){ }}
    <div class="list-empty">
        <i class="layui-icon layui-icon-face-surprised"></i>
        <div>没有文件</div>
    </div>
    {{# } }}
</script>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/layui.js"></script>
<script type="text/javascript" src="/js/plugins/clipboard/clipboard.min.js"></script>
<script>
    var id = $("#projectid").val()
    layui.use(['jquery', 'layer', 'laytpl'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var laytpl = layui.laytpl;
        // 渲染文件列表
        function renderList(dir) {
            layer.load(2);
            $.get('/itm/project/getFiles/api/'+id, function (res) {
                layer.closeAll('loading');
                if (res.code == 0) {
                    console.log(res.data)
                    for (var i = 0; i < res.data.length; i++) {
                        // res.data[i].url =  res.data[i].url;
                        // res.data[i].smUrl = 'file/' + res.data[i].smUrl;
                    }
                    laytpl(fileTpl.innerHTML).render(res.data, function (html) {
                        $('.file-list').html(html);
                    });

                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            });
        }

        renderList();

        var mUrl;
        // 列表点击事件
        $('body').on('click', '.file-list-item', function (e) {
            var isDir = $(this).data('dir');
            var name = $(this).data('name');
            mUrl = $(this).data('url');
            $('#copy').attr('data-clipboard-text', mUrl);
            if (isDir) {
                var cDir = $('#tvFP').text();
                cDir += (cDir == '/' ? name : ('/' + name));
                $('#tvFP').text(cDir);
                renderList(cDir);
            } else {
                var $target = $(this).find('.file-list-img');
                $('#dropdownFile').css({
                    'top': $target.offset().top + 90,
                    'left': $target.offset().left + 25
                });
                $('#dropdownFile').addClass('dropdown-opened');
                if (e !== void 0) {
                    e.preventDefault();
                    e.stopPropagation();
                }
            }
        });

        // 点击空白隐藏下拉框
        $('html').off('click.dropdown').on('click.dropdown', function () {
            $('#copy').attr('data-clipboard-text', '');
            $('#dropdownFile').removeClass('dropdown-opened');
        });

        // 打开
        $('#open').click(function () {
            window.open(mUrl);
        });
    });
</script>
</body>
</html>
